import Icon from '@/components/Icon'
import styled from 'styled-components'
export const Wrap = styled.div`
	height: 100%;
	ul {
		margin-left: 60px;
		height: calc(100% - 120px);
		overflow-y: auto;
		font-size: 14px;
		color: #4e4e4e;
		li {
			width: 414px;
			height: 64px;
			display: flex;
			background: #fff;
			&:hover {
				background: #c1dbec;
			}
			.avatar {
				margin-top: 8px;
				margin-left: 8px;
				margin-right: 16px;
			}
			.info {
				margin-top: 10px;
				.name {
					width: 254px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 12px;
				}
				.detail {
					font-size: 12px;
					.time {
						margin-right: 16px;
					}
				}
			}
			.operations {
				margin-top: 10px;
				margin-left: 16px;
				.approve {
					display: inline-block;
					color: #2f9d6b;
				}
				.reject {
					display: inline-block;
					color: #d21e1e;
				}
			}
		}
	}
`
export const IconApprove = styled(Icon)`
	margin-right: 8px;
	width: 40px;
	height: 26px;
	background-position: 0 -3360px;
	&.active,
	&:hover {
		background-position: -40px -3360px;
	}
`

export const IconReject = styled(Icon)`
	width: 40px;
	height: 26px;
	background-position: -80px -3360px;
	&.active,
	&:hover {
		background-position: -120px -3360px;
	}
`
